<template>
  <div :class="$style.container">
    <div :class="$style.header">
      <img :src="successIcon" :class="$style.icon" alt="" />
      <div :class="$style.text">成功交卷</div>
    </div>
    <div :class="$style.tips">温馨提示：</div>
    <div :class="$style.tips">
      考试成绩可以通过我的考试>已考试查看，成绩出来速度跟任课老师批阅进度有关，如对分数有疑问，请联系任课老师。
    </div>
    <div :class="$style.btnContainer">
      <van-button type="default" size="large" :class="$style.btn" @click="myExam">
        我的考试
      </van-button>
    </div>
  </div>
</template>
<script>
import { Button } from 'vant';

export default {
  name: 'Result',
  components: {
    'van-button': Button,
  },
  data() {
    return {
      successIcon: require('@/assets/success.jpg'),
    };
  },
  methods: {
    myExam() {
      this.$router.push(`/?tab=tab2`);
    },
  },
};
</script>
<style lang="less" module>
.container {
  height: 100%;
  color: #333333;
  .header {
    background: #ffffff;
    border-radius: 6px;
    margin: 10px 15px;
    text-align: center;
    height: 100px;
  }
  .icon {
    height: 40px;
    width: 40px;
    margin: 15px auto 10px;
  }
  .text {
    font-size: 12px;
  }
  .btnContainer {
    margin: 0 auto;
    width: 345px;
    height: 44px;
    bottom: 18px;
  }
  .btn {
    width: 345px;
    height: 44px;
    border-radius: 50px;
    color: white;
    background: #3ead68;
    margin-top: 10px;
  }
  .tips {
    font-weight: 600;
    font-size: 12px;
    color: #999999;
    margin: 0px 15px;
    padding-bottom: 10px;
  }
}
</style>
